<template>
	<div class="container1">

		<div class="card" v-for="(item,i) in shopcars" :key="item.id">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getFlag[item.id]" @change="update(item.id,$store.getters.getFlag[item.id])"></mt-switch>
						<img :src="item.thumb_path">
						<div class="h">
							<h1>{{item.title}}</h1>
							<p>
								<span class="money">￥{{item.sell_price}}</span>
								<shop :count="$store.getters.getShopCount[item.id]" :id="item.id"></shop>
								<a href="#" @click.prevent="moveCar(item.id,i)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>



		<div class="card">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner i">
						<div>
							<p class="p">总计(不含运费)</p><br>
							<p class="p">已勾选商品<span class="red">{{$store.getters.getCountAndMoney.count}}</span>件,总价￥<span class="red">{{$store.getters.getCountAndMoney.money}}</span></p>
						</div>
						<mt-button type="danger" size="small">去结算</mt-button>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	
</template>

<script>
	import shop from '../subcomponent/shop_number.vue'
	export default {
		data() {
			return {
				'shopcars': []
			}
		},
		components: {
			shop
		},
		created() {
			this.getshopcarlist()
		},
		methods: {
			getshopcarlist() {
				var ids = []
				this.$store.state.car.forEach(item => {
					ids.push(item.id)
				})
				if (ids.length <= 0) {
					return;
				}
				this.$http.get('http://www.liulongbin.top:3005/api/goods/getshopcarlist/' + ids.join(',')).then(data => {
					this.shopcars = data.body.message
				})
			},
			moveCar(id, i) {
				this.shopcars.splice(i, 1)
				this.$store.commit('move', id)
			},
			update(id,val){
				this.$store.commit('updata',{id:id,flag:val})
			}

		}
	}
</script>

<style scoped="scoped">
	.container1 {
		overflow: hidden;
		background-color: #EEEEEE;
	}

	.mui-card-content-inner {
		display: flex;
		align-items: center;
	}

	img {
		width: 55px;
	}

	h1 {
		font-size: 13px;
		padding-bottom: 10px;
		width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.money {
		color: red;
		font-weight: bold;
	}

	.h {
		margin-left: 3px;
	}

	.red {
		color: red;
		font-weight: bold;
		font-size: 13px;
	}

	.i {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.p {
		margin: 0px;
	}
</style>
